<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="app">
	<form @submit.prevent="submitHandle">
		<p>
			<span>用户名:</span>
			<span><input type="text" v-model="formData.userName"></span>
		</p>
		<p>
			<span>密码:</span>
			<span><input type="text" v-model="formData.pwd"></span>
		</p>
		<p>
			<span>性别:</span>
			<span>
				<input type="radio" value="男" v-model="formData.sex">男
				<input type="radio" value="女" v-model="formData.sex">女
			</span>
		</p>
		<p>
			<span>爱好:</span>
			<span>
				<input type="checkbox" value="足球" v-model="formData.likes">足球

				<input type="checkbox" value="篮球" v-model="formData.likes">篮球

				<input type="checkbox" value="看书" v-model="formData.likes">看书
			</span>
		</p>

		<p>
			<span>城市:</span>
			<span>
				<select v-model="formData.cityId">
					<option value="0">请选择</option>
					<option :value="item.id" v-for="(item, index) in allCitys" :key="index">{{item.text}}</option>
				</select>
			</span>
		</p>

		<p>
			<span>备注:</span>
			<span>
				<textarea v-model="formData.remark"></textarea>
			</span>
		</p>

		<p>
			<button type="submit">提交</button>
		</p>
	</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			formData: {
				userName: '',
				pwd: '',
				sex: '男',
				likes: [],
				cityId: 0,
				remark: ''
			},			
			allCitys: [
				{id: 1, text: "北京"},
				{id: 2, text: "上海"},
				{id: 3, text: "深圳"}
			],
		},
		methods: {
			submitHandle: function() {
				console.log(this.formData);
			}
		}
	});
</script>
</body>
</html>